<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>输血管理系统</title>
    <link rel="shortcut icon" type="image/x-icon" href="../../../img/favicon.ico">
    <link rel="stylesheet" href="../../../element-theme/blue/index.css">
</head>
<body>
<div class="data-manage-table">
    <template>
        <el-form ref="form" :inline="true" style="padding:20px 20px 0 20px;">
            <el-form-item label="患者血样编号">
                <el-input placeholder="请输入患者血样编号" v-model="pagination.bloodSampleNumber"></el-input>
            </el-form-item>
            <el-form-item label="日期">3
                <el-date-picker v-model="pagination.dateTime" type="daterange" size="small" format="yyyy-MM-dd"
                                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getByQueryPage(1)">搜索</el-button>
                <el-button type="info" @click="getByQueryPage()">重置</el-button>
                <el-button type="info" @click="batchDelete">删除</el-button>
                <el-button type="primary" @click="add">新增</el-button>

            </el-form-item>
        </el-form>

        <el-dialog title="添加患者血样信息" center :visible.sync="dialogAddVisible" width="450px" @close="cancel">
            <!-- 内容的主体区域 -->
            <el-form ref="form" :model="addForm" :rules="addFormRules" align="center" >
                <el-descriptions   :content-style="rowCenter" :label-style="rowCenter" class="margin-top"  :column="1"  :size="size" border>

                    <el-descriptions-item>
                            <template slot="label" align="center" >
                                病历号
                            </template>
                <el-form-item prop="medicalRecordNumber">
                    <el-input v-model="addForm.medicalRecordNumber" ></el-input>
                </el-form-item></el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label" align="center" >
                            抽取人
                        </template>
                <el-form-item  prop="drawPeople">
                    <el-input v-model="addForm.drawPeople" @focus="getUser()"></el-input>
                </el-form-item></el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label" align="center" >
                            抽取人工号
                        </template>
                        <el-form-item  prop="drawPeopleNumber">
                            <el-input v-model="addForm.drawPeopleNumber" @focus="getUser()" style="width:200px">
                            </el-input>
                        </el-form-item></el-descriptions-item>

                    <el-descriptions-item>
                        <template slot="label" align="center" >
                            抽取时间
                        </template>
                <el-form-item  prop="drawTime">
                    <el-date-picker
                            v-model="addForm.drawTime"
                            type="datetime"
                            placeholder="选择日期时间"
                            size="small"
                            format="yyyy-MM-dd HH:mm:ss"
                            style="width:200px">
                    </el-date-picker>
                </el-form-item></el-descriptions-item>

                    <el-descriptions-item>
                        <template slot="label" align="center" >
                            用途
                        </template>
                <el-form-item  prop="purpose">
                    <el-select v-model="addForm.purpose" placeholder="请选择用途" filterable  style="width:200px">
                        <el-option v-for="item in purposeList" :key="item.code" :label="item.name"
                                   :value="item.code" width="50px">
                        </el-option>
                    </el-select>
                </el-form-item></el-descriptions-item>
                </el-descriptions>
            </el-form>
            <!-- 底部区域 -->
            <span slot="footer" class="dialog-footer">
                    <el-button @click="cancel()">取 消</el-button>
                    <el-button type="primary" @click="save">确 定</el-button>
                </span>
        </el-dialog>
        <el-dialog title="修改患者血样信息" center :visible.sync="dialogUpdateVisible" width="400px" @close="cancel">
            <!-- 内容的主体区域 -->
            <el-form ref="form" :model="updateForm" :rules="updateFormRules" align="center">
                <el-descriptions   :content-style="rowCenter" :label-style="rowCenter" class="margin-top"  :column="1"  :size="size" border>
                    <el-descriptions-item>
                        <template slot="label" align="center" >
                            血样编号
                        </template>
                <el-form-item  prop="bloodSampleNumber" >
                    <el-input v-model="updateForm.bloodSampleNumber"  ></el-input>
                </el-form-item></el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label" align="center" >
                            抽取人
                        </template>
                <el-form-item prop="drawPeople">
                    <el-input v-model="updateForm.drawPeople" ></el-input>
                        </el-form-item></el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label" align="center" >
                            抽取人工号
                        </template>
                        <el-form-item  prop="drawPeopleNumber">
                            <el-input v-model="updateForm.drawPeopleNumber">
                            </el-input>
                        </el-form-item></el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label" align="center" >
                            抽取时间
                        </template>
                <el-form-item  prop="drawTime">
                    <el-date-picker
                            v-model="updateForm.drawTime"
                            type="datetime"
                            placeholder="选择日期"
                            size="small"
                            format="yyyy-MM-dd HH:mm:ss"
                            >
                    </el-date-picker>
                </el-form-item></el-descriptions-item>

                    <el-descriptions-item>
                        <template slot="label" align="center" >
                            用途
                        </template>
                <el-form-item  prop="purpose">
                    <el-select v-model="updateForm.purpose" placeholder="请选择用途" filterable  style="width:200px">
                        <el-option v-for="item in purposeList" :key="item.code" :label="item.name"
                                   :value="item.code" width="50px">
                        </el-option>
                    </el-select>
                </el-form-item></el-descriptions-item>
                </el-descriptions>

            </el-form>
            <!-- 底部区域 -->
            <span slot="footer" class="dialog-footer">
                    <el-button @click="cancel()">取 消</el-button>
                    <el-button type="primary" @click="updateBlood">确 定</el-button>
                </span>
        </el-dialog>

        <el-table ref="bloodSampleTable" :data="tableData" style="width: 100%" border
                  :header-cell-style="{'text-align': 'center','background': '#eef1f6'}" highlight-current-row
                  @current-change="" fit>

            <el-table-column type="selection" width="55" align="center"></el-table-column>

            <el-table-column prop="bloodSampleNumber" label="血样编号" align="center" fixed="left">
            </el-table-column>

            <el-table-column prop="drawPeople" label="抽取人" align="center">
            </el-table-column>
            <el-table-column prop="drawPeopleNumber" label="抽取人工号"  align="center">
            </el-table-column>
            <el-table-column label="抽取时间" prop="drawTime" align="center" >
            </el-table-column>
            <el-table-column label="用途" prop="purpose" align="center">
                <template slot-scope="scope">
                    {{ getPurposeName(scope.row.purpose)}}
                </template>
            </el-table-column>
                            <el-table-column label="操作" width="240" align="center" fixed="right">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="danger" @click="handleEdit(scope.$index, scope.row)">修改
                                    </el-button>
                                </template>
                                </el-table-column>

        </el-table>

        <el-pagination :page-sizes="[2,4,6,8,10]"
                       :page-size="pagination.pageSize"
                       :total="pagination.total"
                       :current-page="pagination.currentPage"
                       @current-change="handleCurrentChange"
                       @size-change="handleSizeChange"
                       layout="total,sizes,prev, pager, next, jumper"
                       class="pagination"
                       style="text-align: center; margin-top: 20px;">
        </el-pagination>

    </template>
</div>




<script src="/js/axios.min.js"></script>


<!--<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.12/lib/index.min.js"></script>-->
<!--<link href="https://cdn.jsdelivr.net/npm/element-ui@2.15.12/lib/theme-chalk/index.min.css" rel="stylesheet">-->
<script src="/js/httpVueLoader.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/plugins/vue-2.6.11/vue.js"></script>
<script src="/plugins/element-2.4.5/index.js"></script>
<script src="/icons/iconfont.js"></script>
<script src="/js/2.15.12/index.js"></script>
<link href="/css/2.15.12/index.min.css" rel="stylesheet">
<script src="/js/axios.min.js"></script>
<script>Vue.prototype.$ELEMENT = { size: 'medium' };</script>
<script>
    (function () {
        var vm = window.vm = new Vue({
            el: '.data-manage-table',
            data() {
                return {
                    page: {},
                    name: '',
                    pageNum: 1,
                    pageSize: 8,
                    form: {},

                    rowCenter:{
                        "text-align":"center"
                    },
                    user:{
                        "username":"",
                        "jobnum":"",
                    },




                    //弹出框显示
                    dialogAddVisible: false,
                    dialogUpdateVisible:false,

                    //搜索样本信息
                    searchSample: {
                        bloodSampleNumber: '',  //编号
                    },

                    //表格信息
                    tableData:[],
                    size:'',
                    purposeList:[],

                    // purpose:[
                    //     {
                    //         value: '1',
                    //         label: '验血'
                    //     }, {
                    //         value: '0',
                    //         label: '配血'
                    //     }
                    // ],
                    //分页查询
                    pagination:{
                        currentPage:1,
                        pageSize:2,
                        total:0,
                        //查询条件
                        bloodSampleNumber:'',
                        startTime:'',
                        endTime:'',
                    },



                    //新增血样信息
                    addForm: {
                        medicalRecordNumber:'',
                        //bloodSampleNumber: '',
                        drawPeople: '',
                        drawTime: '',
                        drawPeopleNumber: '',
                        purpose:'',

                    },
                    //修改血样信息
                    updateForm: {
                        id:'',
                        bloodSampleNumber: '',
                        drawPeople: '',
                        drawTime: '',
                        drawPeopleNumber: '',
                        purpose:'',

                    },


                    //新增样本表单验证
                    addFormRules: {
                        medicalRecordNumber: [
                            {required: true, message: '请输入血样编号', trigger: 'blur'},
                        ],

                        drawPeople: [
                            {required: true, message: '请输入抽取人', trigger: 'blur'},
                        ],
                        drawTime: [
                            {required: true, message: '请输入抽取抽取时间', trigger: 'blur'},
                        ],

                        drawPeopleNumber: [
                            {required: true, message: '请输入抽取人工号', trigger: 'change'},
                        ],
                        purpose:[
                            {
                                required: true, message: '请输入抽取抽血目的', trigger: 'change'
                            },
                        ]

                    },
                    updateFormRules: {
                        medicalRecordNumber: [
                            {required: true, message: '请输入血样编号', trigger: 'blur'},
                        ],

                        drawPeople: [
                            {required: true, message: '请输入抽取人', trigger: 'blur'},
                        ],
                        drawTime: [
                            {required: true, message: '请输入抽取抽取时间', trigger: 'blur'},
                        ],

                        drawPeopleNumber: [
                            {required: true, message: '请输入抽取人工号', trigger: 'change'},
                        ],
                        purpose:[
                            {
                                required: true, message: '请输入抽取抽血目的', trigger: 'change'
                            },
                        ]
                    }
                }
            },
            created() {
                this.loadTable(this.pageNum);
                //this.getByQueryPage();

            },
            mounted() {
                this.getPurpose();
                this.getPurposeName();
                this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {};

            },
            methods: {
                handleEdit(index, row) {
                    this.form={}
                    console.log(index, row);
                    this.updateForm=row
                    this.dialogUpdateVisible = true
                    console.log("修改患者信息")
                },

                loadTable(num) {
                    this.pageNum = num;
                    $.get("/bloodsample/normal/list").then(res => {
                        this.tableData=res.data.records;
                        console.log(res.data.records);

                    });
                },
                handleSizeChange:function(pageSize){
                    this.pagination.pageSize=pageSize;
                    this.getByQueryPage(1)
                },
                handleCurrentChange:function (currentPage) {
                    this.pagination.currentPage = currentPage;//执行查询
                    this.getByQueryPage(1);

                },

                getUser(){
                  this.addForm.drawPeopleNumber=this.user.jobnum;
                  this.addForm.drawPeople=this.user.username;
                },
                //患者血样用途字典
                getPurpose(){
                    $.ajax({
                        url: '/purpose/normal/query',
                        type: 'get',
                        contentType: 'application/json',
                    }).then((res) =>{
                        this.purposeList=res
                    })
                },
                //将数据字典数据转为中文
                getPurposeName(code){
                    for (let i=0; i<this.purposeList.length; i++){
                        if(this.purposeList[i].code ===String(code)){
                            return this.purposeList[i].name;
                        }
                    }

                },

                //按条件查询
                getByQueryPage:function(flag){
                    if(flag!==1){
                        this.pagination.bloodSampleNumber='';
                        this.pagination.dateTime='';

                    }
                    console.log("+++++")
                    if(this.pagination.dateTime!=null){
                        this.startTime=this.pagination.dateTime[0]
                        this.endTime=this.pagination.dateTime[1]
                    }
                    console.log(this.pagination.bloodSampleNumber)
                    axios.get('/bloodsample/normal/'+this.pagination.currentPage+'/'+this.pagination.pageSize,
                        {
                            params:{
                                bloodSampleNumber:this.pagination.bloodSampleNumber,
                                startTime:this.startTime,
                                endTime:this.endTime,
                            }
                        }).then(res => {

                        if(res.data.code === 200){
                            this.pagination.pageSize=res.data.data.size;
                            this.pagination.currentPage=res.data.data.current;
                            this.pagination.total=res.data.data.total;
                            this.tableData=res.data.data.records;
                        }else{
                            this.$message.error("查询失败")
                        }
                    })
                },
                //点击新增按钮弹窗
                add() {
                    this.dialogAddVisible = true;
                    this.form = {};
                },
                //保存新增患者血样信息
                save() {
                        console.log(this.addForm.medicalRecordNumber)
                        console.log(this.addForm.drawTime)
                        axios.get('/bloodsample/normal/add',
                            {
                                params:{
                                    medicalRecordNumber:this.addForm.medicalRecordNumber,
                                    drawPeople:this.user.username,
                                    drawTime:this.addForm.drawTime,
                                    drawPeopleNumber:this.user.jobnum,
                                    purpose:this.addForm.purpose,
                                }
                            }).then(res => {
                            this.addForm.medicalRecordNumber=''
                            this.addForm.drawPeopleNumber=''
                            this.addForm.drawTime=''
                            this.addForm.drawPeopleNumber=''
                            this.addForm.purpose=''
                            this.dialogAddVisible = false;
                            this.loadTable(1);
                        })},
                //更新患者血样信息
                updateBlood() {
                    let data = JSON.stringify(this.updateForm);
                    console.log(data)
                        $.ajax({
                            url: '/bloodsample/normal/sampleupdate',
                            type: 'put',
                            contentType: 'application/json',
                            data: data
                        }).then(res => {
                            if (res) {
                                this.$message.success("保存成功")
                                this.dialogUpdateVisible = false
                                this.loadTable(1);
                            } else {
                                this.$message.error("保存失败")
                            }
                            this.loadTable(1);
                        })
                    console.log(data)

                    },

                //批量删除
                batchDelete() {
                    if(JSON.parse(JSON.stringify(this.$refs.bloodSampleTable.selection)).length===0){
                        this.$notify({
                            title: '温馨提示：',
                            message: '您未选中数据，请重新操作！！！',
                            type: 'warning'
                        });
                        return;
                    }
                    let checkArr = JSON.parse(JSON.stringify(this.$refs.bloodSampleTable.selection));  // 存储了勾选到的数据
                    var ids=new Array()
                    for(var i=0;i<checkArr.length;i++){
                        ids[i]=checkArr[i].id;
                    }
                    console.log("打印所选编号")
                    console.log(ids)
                    // let data={ids:ids}
                    //批量删除
                    this.$confirm('确定删除这些数据吗, 是否继续?', '批量删除', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios({
                            url: '/bloodsample/normal/batchDelete',
                            method: 'put',
                            dataType: 'json',
                            data:ids
                        }).then(res => {
                            console.log(res.data.code)
                            if (res.data.code === 200) {
                                this.$notify({
                                    tile: '温馨提示',
                                    message: '批量删除成功！！！',
                                    type: 'success'
                                })
                                this.getByQueryPage(0);
                            } else {
                                this.$notify({
                                    tile: '警告',
                                    message: '删除出错',
                                    type: 'warning'
                                })
                            }
                        }).catch(err => {
                            this.$notify.error({
                                title: '错误',
                                message: '删除失败',
                            })
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },

                //取消按钮
                cancel() {
                    this.addForm.bloodSampleNumber = ''
                    this.addForm.drawPeople = ''
                    this.addForm.drawPeopleNumber = ''
                    this.dialogAddVisible = false
                    this.dialogUpdateVisible=false
                }
            }

        })
    })()
</script>
</body>
</html>